<template>
  <div>
    <div class="loginPage" v-show="showLogin">
      <h1>登录</h1>
      <p v-show="showTip" style="color:red">{{tip}}</p>
      <input type="text" placeholder="请输入用户名" class="mobile" v-model="mobile">
      <input type="password" placeholder="请输入密码" class="pwd" v-model="pwd">
      <button class="loginBtn" @click="login">登录</button>
      <span class="register lf" @click="toRegister">没有账号？马上注册</span><span class="rt" @click="forgot">忘记密码</span>
    </div>
    <div class="loginPage" v-show="showRegister">
      <h1>注册</h1>
      <p v-show="showTip" style="color:red">{{tip}}</p>
      <input type="text" placeholder="请输入用户名" class="mobile" v-model="newmobile">
      <input type="password" placeholder="请输入密码" class="pwd" v-model="newpwd">
      <button class="loginBtn" @click="register">注册</button>
      <span class="register lf" @click="toLogin">已有账号？马上登录</span><span class="rt" @click="forgot">忘记密码</span>
    </div>
  </div>
</template>

<script>
import { setCookie,getCookie,delCookie } from '../assets/cookie.js'
export default {
  name: 'Login',
  data () {
    return {
      showRegister:false,
      showLogin:true,
      showTip:false,
      tip:'',
      mobile: '',
      pwd: '',
      newmobile: '',
      newpwd: ''
    }
  },
  mounted(){
  /*页面挂载获取cookie，如果存在mobile的cookie，则跳转到主页，不需登录*/
    if(getCookie('mobile')){
        this.$router.push('/home')
    }
  },
  methods:{
    login(){
      var self = this;
      if(self.mobile == ""|| self.pwd == ""){
        self.tip = "请输入用户名或密码"
        self.showTip = true
      }else{
        var self = this;
        var data = {'mobile':self.mobile,'pwd':self.pwd}
       console.log(data)
       
       //setCookie(self.mobile,self.pwd,1000*60)//ok
        // 发送一个 POST 请求
        self.$http.post(
          // 'http://172.16.8.143:7777/users/session',
          'http://localhost:7777/users/session',
          data,
          // {headers: {
          //   "Access-Control-Allow-Origin": "*",
          // }}
          ).then(
            function (res) {
　　        //请求成功
             console.log(res)
             console.log(res.data.code)
             console.log(res.data.msg)
             console.log(res.data.data.mobile)
             console.log(res.data.data.password)
            var code = res.data.code;
            var msg  = res.data.msg
            var pwd  = res.data.data.password
            var mobile = res.data.data.mobile
           
           
            //console.log(msg)
            /*接口的传值是(-1,该用户不存在),(0,密码错误)，同时还会检测管理员账号的值*/
            if(code == -1){
              self.tip = msg//"该用户不存在"
              self.showTip = true
            }else if(code == 0){
              self.tip = msg//"密码输入错误"
              self.showTip = true
            }else if((code==200)&&(mobile=="admin")){
              console.log(code)
            /*路由跳转this.$router.push*/
              //self.$router.push('/admin')
              self.tip = "登录成功"
              self.showTip = true
              console.log(mobile)
              console.log(pwd)
              setCookie(mobile,pwd,1000*60)
              setTimeout(function(){
                self.$router.push('/admin')
              },1000)
            }else if((code==200)&&(mobile !== 'admin')){
              //console.log(code);
               self.$router.push('/home')
              self.tip = "登录成功"
              self.showTip = true
              setCookie(mobile,pwd,1000*60)
              setTimeout(function(){
                self.$router.push('/home')
               }.bind(self),1000)
            }
            }).catch(function (error) {
      　　  //请求失败
            });
         }
    },
    register(){
      if(this.newmobile == ""|| this.newpwd == ""){
        this.tip = "请输入用户名或密码"
        this.showTip = true
      }else{
        var data = {'mobile':this.newmobile,'pwd':this.newpwd}
        console.log(data)
      // this.$http.post('http://172.16.8.143:7777/users/session',data).then((res)=>{
      //     console.log(res)
      //     if(res.data == "ok"){
      //         this.tishi = "注册成功"
      //         this.showTishi = true
      //         this.mobile = ''
      //         this.pwd = ''
      //         /*注册成功之后再跳回登录页*/
      //         setTimeout(function(){
      //             this.showRegister = false
      //             this.showLogin = true
      //             this.showTishi = false
      //         }.bind(this),1000)
      //     }
      // })

        }
    },
    forgot(){
      //
    },
    toLogin(){
      this.showRegister = false;
      this.showLogin = true;
      this.showTip = false;
    },
    toRegister(){
      this.showRegister = true;
      this.showLogin = false;
      this.showTip = false;
    },
  
  }
}
</script>

<style scoped>
.lf{float:left}
.rt{float:right}
.loginPage{
  margin:0 auto;
  width:300px;
}
.mobile{
  box-sizing: border-box;
  width: 100%;
  padding: 10px 10px;
  margin: 10px 0;
}
.pwd{
  box-sizing: border-box;
  width: 100%;
  padding: 10px 10px;
  margin: 10px 0;
}
.loginBtn{
  display: block;
  width:100%;
  padding: 10px 10px;
  margin: 10px 0;
  background:green;
  color:#ddd;
  cursor:pointer;
}
.register:hover{
  color:green;
  cursor:pointer;
}
.loginPage .tipclolr{
  color:red;
}
</style>
